import React from 'react'
import { Form, Input, Button, Divider } from 'antd'
import LoginWrap from './components/login_wrap'
import { Link, useNavigate } from "react-router-dom"
import axios from '../util/http'


// 账号登录
function LoginForm() {
  return (
    <>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]} >
        <Input type="text" id="username" placeholder={'用户名'} />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]} >
        <Input type="password" id="password" placeholder={'密码'} />
      </Form.Item>
    </>
  )
}

function Login() {
  const [form] = Form.useForm();
  const navigate = useNavigate()

  async function login_click() {
    const form_data = await form.validateFields()
    if (form_data) {
      const res = await axios.post('/api/login', form_data)
      // 登录成功就跳转到project页面
      if (res.data.code === 0) {
        navigate('/project')
      }
    }
  }

  return (
    <LoginWrap >
      {/* 登录表单作为子组件嵌套在  LoginWrap 组件内部  */}
      <Form form={form} >
        <p className='login_box_p'>登录界</p>
        <LoginForm />
        <Button onClick={login_click} className='login_button' type="primary">登录</Button>
        <Divider />
        <Link className='login_enroll' to="/register">没有账号？注册新账号</Link>
      </Form>
    </LoginWrap>
  )
}

export default Login